<template>
  <div class="static_item">
    <div class="static_item__name">[{{info.name}}]</div>
    <div v-for="aggr in aggrList" class="static_item__prop" :key="aggr.name">
      <span class="static_item__prop__label">{{nameMap[aggr.name]}}:</span>
      <span class="static_item__prop__value">{{aggr.value}}</span>
    </div>
  </div>
</template>

<script>
import { formatNumber } from '../../utils/number'

// 取平均值
const avg = (info) => {
  if (!info || info.count === 0) {
    return 0
  }

  return formatNumber(Math.round(info.sum / info.count), info.format)
}

export default {
  data () {
    return {
      nameMap: {
        max: '最大值',
        min: '最小值',
        avg: '平均值',
        count: '计数',
        sum: '总和',
      }
    }
  },
  props: {
    info: {
      type: Object,
      default: () => {}
    },
  },
  computed: {
    aggrList () {
      const { info } = this
      return info.aggregate.split(',').map(item => {
        return {
          name: item,
          value: item === 'avg' ? avg(info) : info[item]
        }
      })
    }
  }
}
</script>

<style scoped>
  .static_item {
    display: inline-block;
    white-space: nowrap;
    margin-right: 12px;
  }

  .static_item__name {
    display: inline-block;
    margin-right: 4px;
    color: #2196F3;
  }

  .static_item__prop {
    display: inline-block;
  }

  .static_item__prop__label {
    display: inline-block;
    margin: 0 2px 4px 8px;
    color: #999;
  }
</style>
